import { useMemo, useState } from 'react';
import styles from './index.module.less';
import clsx from 'clsx';
import { useRecoilState } from 'recoil';
import { RoundDetailState } from '@/state';

const RightCom: React.FC = () => {
    const [roundDetailState,] = useRecoilState(RoundDetailState);
    const lattices = useMemo(() => new Array(25).fill(null), []);
    const { prizeAmount, betAmount, sweepNum, userPosition = '', gamePosition = '' } = roundDetailState as any;

    return <div className={styles.RightCom}>
        <div className={styles.topFlex}>
            <div className={styles.item}>
                <span className={styles.label}>Bet:&nbsp;</span>
                <span className={styles.value}>{betAmount}₹</span>
            </div>
            <div className={styles.item}>
                <span className={styles.label}>Cash out:&nbsp;</span>
                <span className={styles.value}>{prizeAmount || 0}₹</span>
            </div>
            <div className={styles.item}>
                <span className={styles.label}>Mines:&nbsp;</span>
                <span className={styles.value}>{sweepNum}</span>
            </div>
        </div>
        <div className={styles.flexlayout}>
            <div className={styles.leftlayout}>
                <div className={styles.title1}>Icon result:</div>
                <div className={styles.lattice}>
                    {lattices.map((_, index) => {
                        return (
                            <div
                                key={index}
                                className={clsx(
                                    styles.item,
                                    gamePosition.charAt(index) === '1' && styles.mine,
                                    userPosition.split(',').includes(index + '') && styles.itemActive,
                                    userPosition.split(',').includes(index + '') && gamePosition.charAt(index) === '1' && styles.mineActive,
                                )}
                            />
                        );
                    })}
                </div>
            </div>
            <div>
                <div className={styles.title2}>Data result:</div>
                <div className={styles.lattice}>
                    {lattices.map((_, index) => {
                        return (
                            <div
                                key={index}
                                className={styles.num}
                            >{gamePosition[index]}</div>
                        );
                    })}
                </div>
            </div>
        </div>
    </div>
}

export default RightCom;